<template>
    <div class="fl left-list"> 
    <div class="tab-content"> 
     <div id="index" class="tab-pane active"> 
      <div class="tab-bottom-line"> 
       <ul class="sui-nav nav-tabs"> 
        <li :class="(flag==='new'?'active':'')"><a @click="flag='new'" data-toggle="tab">最新回答</a></li> 
        <li :class="(flag==='hot'?'active':'')"><a @click="flag='hot'" data-toggle="tab">热门回答</a></li> 
        <li :class="(flag==='wait'?'active':'')"><a @click="flag='wait'" data-toggle="tab">等待回答</a></li> 
       </ul> 
       <div class="qa-list" v-infinite-scroll="loadMore"> 
        <div class="tab-content"> 
         <div id="new" :class="'tab-pane '+(flag==='new'?'active':'')"> 
          
          <ul class="detail-list"> 
           <li class="qa-item" v-for="(item,index) in newlist" :key="index"> 
            <div class="fl record"> 
             <div class="number"> 
              <div class="border useful"> 
               <p class="usenum">{{item.thumbup}}</p> 
               <p>有用</p> 
              </div> 
              <div class="border answer"> 
               <p class="ansnum">{{item.reply}}</p> 
               <p>回答</p> 
              </div> 
             </div> 
            </div> 
            <div class="fl info"> 
             <div class="question"> 
              <p class="author"><span class="name">{{item.replyname}}</span><span>{{item.replytime}}</span>回答</p> 
              <p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p> 
             </div> 
             <div class="other"> 
              <div class="fr brower"> 
               <p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p> 
              </div> 
             </div> 
            </div> 
            <div class="clearfix"></div> 
            </li> 
          </ul> 
      
         </div> 
         <div id="hot" :class="'tab-pane '+(flag==='hot'?'active':'')"> 
          
          <ul class="detail-list"> 
           <li class="qa-item" v-for="(item,index) in hotlist" :key="index"> 
            <div class="fl record"> 
             <div class="number"> 
              <div class="border useful"> 
               <p class="usenum">{{item.thumbup}}</p> 
               <p>有用</p> 
              </div> 
              <div class="border answer"> 
               <p class="ansnum">{{item.reply}}</p> 
               <p>回答</p> 
              </div> 
             </div> 
            </div> 
            <div class="fl info"> 
             <div class="question"> 
              <p class="author"><span class="name">{{item.replyname}}</span><span>{{item.replytime}}</span>回答</p> 
              <p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p> 
             </div> 
             <div class="other"> 
              <div class="fr brower"> 
               <p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p> 
              </div> 
             </div> 
            </div> 
            <div class="clearfix"></div> 
            </li> 
          </ul> 
          

         </div> 
         <div id="wait" :class="'tab-pane '+(flag==='wait'?'active':'')"> 
          
          <ul class="detail-list"> 
           <li class="qa-item" v-for="(item,index) in waitlist" :key="index"> 
            <div class="fl record"> 
             <div class="number"> 
              <div class="border useful"> 
               <p class="usenum">{{item.thumbup}}</p> 
               <p>有用</p> 
              </div> 
              <div class="border answer"> 
               <p class="ansnum">{{item.reply}}</p> 
               <p>回答</p> 
              </div> 
             </div> 
            </div> 
            <div class="fl info"> 
             <div class="question"> 
              <p class="author"><span class="name">{{item.replyname}}</span><span>{{item.replytime}}</span>回答</p> 
              <p class="title"><a href="./qa-detail.html" target="_blank">{{item.title}}</a></p> 
             </div> 
             <div class="other"> 
              <div class="fr brower"> 
               <p>浏览量 {{item.visits}} | {{item.createtime}} 来自 <a href="#">{{item.nickname}} </a></p> 
              </div> 
             </div> 
            </div> 
            <div class="clearfix"></div> 
            </li> 
          </ul> 


         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div id="php" class="tab-pane">
       php 
     </div> 
     <div id="js" class="tab-pane">
       Javascript 
     </div> 
     <div id="python" class="tab-pane">
       python 
     </div> 
     <div id="java" class="tab-pane">
       java 
     </div> 
    </div> 
   </div>
</template>

<script>
import problemApi from '@/api/problem'
import axios from 'axios'
export default {
    data(){
       return{
         flag:'new'
       }
    },
    asyncData({params}){
        return axios.all([
            problemApi.list('newlist',params.label,1,10),
            problemApi.list('hotlist',params.label,1,10),
            problemApi.list('waitlist',params.label,1,10)
            ]).then(
                axios.spread( function(newlist,hotlist,waitlist){
                    return {
                        newlist: newlist.data.data.rows,
                        hotlist: hotlist.data.data.rows,
                        waitlist: waitlist.data.data.rows
                    }
                }
            ))
    },
    methods: {
        loadMore(){
          if(this.flag==='new'){
            problemApi.list('newlist',this.labelid,++this.pageNo_new,10).then(res=>{
              this.newlist = this.newlist.concat(res.data.data.rows)
            })
          }

          if(this.flag==='hot'){
            problemApi.list('hotlist',this.labelid,++this.pageNo_hot,10).then(res=>{
              this.hotlist = this.hotlist.concat(res.data.data.rows)
            })
          }

          if(this.flag==='wait'){
            problemApi.list('waitlist',this.labelid,++this.pageNo_wait,10).then(res=>{
              this.waitlist = this.waitlist.concat(res.data.data.rows)
            })
          }
      }
  }
}
</script>